<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/templates/general.xhtml">

    <ui:define name="title"><h:outputText value="#{administrationBean.selectedSubCategory.name}" /></ui:define>

    <ui:define name="header">
    </ui:define>

    <ui:define name="content">


        <h:form id="form">
            <p:growl id="growl" showDetail="false" life="3000" autoUpdate="true" />

            <ol class="breadcrumb adminPanel">
                <li><p:commandLink value="Administration" action="back" /></li>
                <li><p:commandLink value="Categories" action="categories" /></li>
                <li><p:commandLink value="#{administrationBean.selectedCategory.name}" action="categories_subCategories" /></li>
                <li class="active">#{administrationBean.selectedSubCategory.name}</li>
            </ol>

            <div class="content">
                <div class="adminPanel">
                    <p:commandButton value="Add SubCategory" onsuccess="newDialog.show()" styleClass="adminPanelButton btn btn-success"/>
                    <p:commandButton value="Remove SubCategory" onsuccess="removeDialog.show()" styleClass="adminPanelButton btn btn-warning"/>
                </div>
                <ul class="ca-menu">
                    <ui:repeat var="c" value="#{administrationBean.selectedSubCategory.subCategories}">
                        <li>
                            <p:commandLink action="products" actionListener="#{administrationBean.safeSetSelectedSubCategory2(c)}">
                                <span class="ca-icon"><p:graphicImage styleClass="ca-icon-image" style="margin-top: 20px;" url="/images/#{c.name}.png" width="150" /></span>
                                <div class="ca-content">
                                    <h2 class="ca-main">#{c.name}</h2>
                                    <h3 class="ca-sub">#{c.description}</h3>
                                </div>
                            </p:commandLink>
                        </li>
                    </ui:repeat>

                </ul>
            </div>








            <p:dialog id="newDialog" widgetVar="newDialog" modal="true" header="Add SubCategory" resizable="false" dynamic="true">
                <p:panelGrid columns="2">
                    <h:outputText value="Category Name"/>
                    <p:inputText value="#{administrationBean.category.name}" />
                    <h:outputText value="Description"/>
                    <p:inputTextarea cols="30" rows="8" value="#{administrationBean.category.description}" />
                    <p:fileUpload fileUploadListener="#{administrationBean.uploadImage}" mode="advanced" auto="true" />
                </p:panelGrid>
                <p:commandButton value="Save" actionListener="#{administrationBean.saveCategory}" onclick="newDialog.hide()" update="form" styleClass="btn btn-success"/>
                <p:commandButton value="Calcel" onclick="newDialog.hide()" update="form" styleClass="btn btn-danger"/>
            </p:dialog>





            <p:dialog id="removeDialog" widgetVar="removeDialog" modal="true" header="Remove SubCategory" resizable="false">
                <p:dataTable var="c" value="#{administrationBean.convertToCategoryModel(administrationBean.selectedSubCategory.subCategories)}" selectionMode="multiple" selection="#{administrationBean.selectedCategories}" rowKey="#{c.name}" style="width:800px; margin: 10px;" scrollable="true" scrollHeight="500">

                    <p:column headerText="Name">
                        <h:outputText value="#{c.name}" />
                    </p:column>

                </p:dataTable>
                <p:commandButton value="Delete" actionListener="#{administrationBean.removeCategories(administrationBean.selectedCategories)}" onclick="removeDialog.hide()" update="form" styleClass="btn btn-warning"/>
                <p:commandButton value="Calcel" onclick="removeDialog.hide()" onsuccess="javascript:window.location.reload()" update="form" styleClass="btn btn-danger"/>
            </p:dialog>



        </h:form>












    </ui:define>

</ui:composition>